<template>
  <div class="bg mylessons">
    <vnav>
      <div class="tab clearfix">
        <a @click="changeType(0)" :class="{active: type === 0}">已预约</a>
        <a @click="changeType(1)" :class="{active: type === 1}">已完成</a>
      </div>
    </vnav>
    <div class="lessons bgw">
      <div class="lesson_item clear animated" transition="fade" v-for="item in list">
        <a v-link="{name: 'lesson',query: {id: item.id}}">
          <div class="imgWrap">
            <img :src="item.imgs[0]" />
          </div>
        </a>
        <div class="lesson_info">
          <a v-link="{name: 'lesson',query: {id: item.id}}">
            <p class="title">
              {{item.title}}
            </p>
            <p class="desc">
              <i class="icon_1"></i>{{item.address}}
            </p>
            <p class="desc">
              <i class="icon_2"></i>{{item.time}}
            </p>
            <p class="desc">
              <i class="icon_5"></i>老师:{{item.teacher}}
            </p>
          </a>
          <!-- 0: 未预约 1 预约中 2 预约成功 3 预约失败 4 待评价 5 已完成 -->
          <div class="status status_ok" v-if="item.status === 2">
            <i class="ok"></i>预约成功
          </div>
          <div class="status status_no" v-if="item.status === 3">
              <i class="no"></i>预约失败,人员已满
          </div>
          <div class="status status_complete" v-if="item.status === 5">
            已完成
          </div>
          <a class="handel" v-if="item.status === 4" v-link="{name: 'evaluate', query: {'id': item.id}}">待评价</a>
          <a @click="cancelYuyue" class="handel" v-if="item.status === 2">取消预约</a>
        </div>
      </div>
    </div>
    <div class="loadingMsg" v-if="isloading">
      加载中...
    </div>
    <p class="bottom-line" v-if="!isloading&&!ismore"><span>{{list.length>0 ? '已经到底了' : '当前没有数据'}}</span></p>
    <div class="loading" v-if="!isloading&&list.length>0&&ismore" @click="nextPage()">
      点击加载更多
    </div>
  </div>
</template>
<script type="text/babel">
  import {getMyLessons, yuyue} from '../factory/lessons';
  export default {
    name: 'mylessons',
    components: {
      vnav: require('../components/vnav')
    },
    data () {
      return {
        list: [],
        type: 0, // 0: 已预约 1: 已完成
        pageIndex: 1,
        isloading: true,
        ismore: false
      };
    },
    created () {
      this.$dispatch('alert.close');
      let that = this;
      that.nextPage();
    },
    methods: {
      changeType (type) {
        let that = this;
        that.type = type;
        that.initQuery();
        that.nextPage();
      },
      cancelYuyue () {
        yuyue().then(res => {
          if (!res.iserror) {
            this.$dispatch('alert', '操作成功~');
          }
        });
      },
      nextPage () {
        let that = this;
        let postParams = {page: this.pageIndex++, size: 5};
        Object.assign(postParams, {type: that.type});
        that.isloading = true;
        getMyLessons(postParams).then(function (res) {
          if (!res.iserror) {
            that.list = that.list.concat(res.data.list);
            that.ismore = true;
            if (res.data.count <= that.list.length) {
              that.ismore = false;
            }
          }
          that.isloading = false;
        });
      },
      initQuery () {
        let that = this;
        that.list = [];
        that.pageIndex = 1;
        that.ismore = false;
      }
    }
  };
</script>
